<template>
	<view class="container">
		<!-- 欢迎语 -->
		<view class="login-title">
			<view>您好，</view>
			<view>欢迎登录车联网服务!</view>
		</view>
		<!-- 登录框 -->
		<view class="login-box">
			<input class="login-input" type="text" placeholder="请输入用户名" v-model="reg.username" />
			<input class="login-input" type="safe-password" placeholder="请输入密码" v-model="reg.password" />
			<input class="login-input" type="text" placeholder="请输入姓名" v-model="reg.nickname" />
			<input class="login-input" type="text" placeholder="请输入电话" v-model="reg.phone" />
			<input class="login-input" type="text" placeholder="请输入邮箱" v-model="reg.email" />
			<button class="login-button" @click="register">注册账号</button>
			<button class="login-button" @click="goBack"
				style="background-color: #e5e8ec; color: #297cf7;">取消注册</button>
		</view>

		<!-- 人物图 -->
		<view class="character">
			<image class="character-image" src="/static/login/loginbgp.png" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import request from '/pages/utils/request.js';
	import baseUrl from '/pages/utils/urlConfig';

	const reg = ref({
		username: 'lisi',
		password: '123456',
		nickname: '李四',
		phone: '19645269731',
		email: '16485121354@icloud.com'
	})

	function register() {
		request({
			url: baseUrl + '/user/user/addUser',
			method: 'POST',
			data: {
				userName: reg.value.username,
				password: reg.value.password,
				nickName: reg.value.nickname,
				phone: reg.value.phone,
				email: reg.value.email
			},
			success(res) {

				console.log(res.data.data);
				if (res.data.code == 200) {
					// 1. 登录成功提示
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					});


					// 2. 跳转到登录
					uni.navigateTo({
						url: '/pages/login/login'
					});
				} else {
					uni.showToast({
						title: '注册失败',
						icon: 'error'
					})
				}

			}
		})
	}
	
	function goBack(){
		uni.navigateBack();
	}
</script>

<style scoped>
	.container {
		background-image: url(/static/login/loginbg.png);
		background-size: 100%;
		width: 100%;
	}

	.login-title {
		height: 180rpx;
		color: white;
		font-size: 16px;
		padding: 150rpx 0 0 100rpx;
	}

	.login-title :nth-child(1) {
		font-size: 23px;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.character {
		position: absolute;
		top: 190rpx;
		left: 450rpx;
	}

	.character-image {
		width: 140px;
		height: 110px;
	}

	.login-box {
		height: 100vh;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 120rpx 80rpx;
	}

	.login-input {
		padding: 8px 4px;
		border-bottom: #d8d8d8 2px solid;
		margin-bottom: 25px;
	}

	.code-button {
		background-color: #4c8efe;
		color: #fff;
		font-size: 14px;
		width: 100px;
		height: 35px;
		border-radius: 17px;
		position: absolute;
		right: 80rpx;
		top: 580rpx;
	}

	.login-button {
		background-color: #297cf7;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		height: 44px;
		line-height: 44px;
		border-radius: 24px;
		margin: 30rpx auto;
	}
</style>